{% extends "admin/base.html" %}

{% block title %}API Usage Statistics{% endblock %}
{% block header_title %}API Usage Statistics{% endblock %}

{% block content %}
<div class="space-y-8">

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <!-- Daily Usage Card -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">Requests per Day (Last 30 Days)</h2>
                <div class="space-x-2">
                    <button onclick="exportChartToPNG('dailyUsageChart', 'daily-usage.png')" class="text-sm text-indigo-600 hover:underline">Export PNG</button>
                    <button onclick="exportDataToCSV(['Date', 'Request Count'], {{ daily_labels | tojson }}, {{ daily_data | tojson }}, 'daily-usage.csv')" class="text-sm text-indigo-600 hover:underline">Export CSV</button>
                </div>
            </div>
            {% if daily_data %}
                <canvas id="dailyUsageChart"></canvas>
            {% else %}
                <div class="flex items-center justify-center h-64 text-gray-500">
                    <p>No request data available for this period.</p>
                </div>
            {% endif %}
        </div>

        <!-- Hourly Usage Card -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">Peak Hours (UTC)</h2>
                 <div class="space-x-2">
                    <button onclick="exportChartToPNG('hourlyUsageChart', 'hourly-usage.png')" class="text-sm text-indigo-600 hover:underline">Export PNG</button>
                    <button onclick="exportDataToCSV(['Hour (UTC)', 'Request Count'], {{ hourly_labels | tojson }}, {{ hourly_data | tojson }}, 'hourly-usage.csv')" class="text-sm text-indigo-600 hover:underline">Export CSV</button>
                </div>
            </div>
            {% if hourly_data and hourly_data | sum > 0 %}
                <canvas id="hourlyUsageChart"></canvas>
            {% else %}
                <div class="flex items-center justify-center h-64 text-gray-500">
                    <p>No hourly usage data available.</p>
                </div>
            {% endif %}
        </div>

    </div>

    <!-- Server Load, Model Usage, and Key Usage Row -->
    <div class="grid grid-cols-1 lg:grid-cols-6 gap-8">
        <!-- Server Load Card -->
        <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">Server Load Distribution</h2>
                 <div class="space-x-2">
                    <button onclick="exportChartToPNG('serverLoadChart', 'server-load.png')" class="text-sm text-indigo-600 hover:underline">Export PNG</button>
                    <button onclick="exportDataToCSV(['Server Name', 'Request Count'], {{ server_labels | tojson }}, {{ server_data | tojson }}, 'server-load.csv')" class="text-sm text-indigo-600 hover:underline">Export CSV</button>
                </div>
            </div>
            {% if server_data and server_data | sum > 0 %}
                <canvas id="serverLoadChart"></canvas>
            {% else %}
                <div class="flex items-center justify-center h-64 text-gray-500">
                    <p>No server load data available.</p>
                </div>
            {% endif %}
        </div>

        <!-- Model Usage Card -->
        <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">Model Usage Distribution</h2>
                 <div class="space-x-2">
                    <button onclick="exportChartToPNG('modelUsageChart', 'model-usage.png')" class="text-sm text-indigo-600 hover:underline">Export PNG</button>
                    <button onclick="exportDataToCSV(['Model Name', 'Request Count'], {{ model_labels | tojson }}, {{ model_data | tojson }}, 'model-usage.csv')" class="text-sm text-indigo-600 hover:underline">Export CSV</button>
                </div>
            </div>
            {% if model_data %}
                <canvas id="modelUsageChart"></canvas>
            {% else %}
                <div class="flex items-center justify-center h-64 text-gray-500">
                    <p>No model-specific usage data available.</p>
                    <p class="text-xs mt-2">(This chart populates when requests include a "model" field.)</p>
                </div>
            {% endif %}
        </div>

        <!-- Key Usage Table Card -->
        <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2">
             <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">Total Requests per API Key</h2>
                <button onclick="exportTableToCSV('keyUsageTable', 'key-usage.csv')" class="text-sm text-indigo-600 hover:underline">Export CSV</button>
            </div>
            <div class="overflow-x-auto max-h-96">
                <table class="min-w-full divide-y divide-gray-200" id="keyUsageTable">
                    <thead class="bg-gray-50 sticky top-0">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key Prefix</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Requests</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for stat in key_usage_stats %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ stat.username }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ stat.key_name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-mono">{{ stat.key_prefix }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900">{{ stat.request_count }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-center text-gray-500">No usage data available.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- CHART & EXPORT JAVASCRIPT -->
<script>
    // --- Helper Functions for Exporting ---
    function downloadURI(uri, name) {
        const link = document.createElement("a");
        link.download = name;
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    function exportChartToPNG(chartId, filename) {
        const chart = Chart.getChart(chartId);
        if (chart) {
            const uri = chart.toBase64Image();
            downloadURI(uri, filename);
        }
    }

    function exportDataToCSV(headers, labels, data, filename) {
        let csvContent = "data:text/csv;charset=utf-8," + headers.join(",") + "\n";
        labels.forEach((label, index) => {
            csvContent += `"${label}",${data[index]}\n`;
        });
        const encodedUri = encodeURI(csvContent);
        downloadURI(encodedUri, filename);
    }

    function exportTableToCSV(tableId, filename) {
        const table = document.getElementById(tableId);
        let csvContent = "data:text/csv;charset=utf-8,";
        const rows = table.querySelectorAll("tr");
        
        rows.forEach(row => {
            const cols = row.querySelectorAll("th, td");
            const rowData = Array.from(cols).map(col => `"${col.innerText}"`);
            csvContent += rowData.join(",") + "\n";
        });

        const encodedUri = encodeURI(csvContent);
        downloadURI(encodedUri, filename);
    }


    // --- Chart Initializations ---
    document.addEventListener('DOMContentLoaded', function () {
        const primaryColor = 'rgba(79, 70, 229, 1)';
        const primaryColorTransparent = 'rgba(79, 70, 229, 0.2)';

        // 1. Daily Usage Chart (Line)
        const dailyCtx = document.getElementById('dailyUsageChart')?.getContext('2d');
        if (dailyCtx) {
            new Chart(dailyCtx, {
                type: 'line',
                data: {
                    labels: {{ daily_labels | tojson }},
                    datasets: [{
                        label: 'Requests',
                        data: {{ daily_data | tojson }},
                        borderColor: primaryColor,
                        backgroundColor: primaryColorTransparent,
                        fill: true,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        // 2. Hourly Usage Chart (Bar)
        const hourlyCtx = document.getElementById('hourlyUsageChart')?.getContext('2d');
        if (hourlyCtx) {
            new Chart(hourlyCtx, {
                type: 'bar',
                data: {
                    labels: {{ hourly_labels | tojson }},
                    datasets: [{
                        label: 'Requests',
                        data: {{ hourly_data | tojson }},
                        backgroundColor: primaryColorTransparent,
                        borderColor: primaryColor,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        // 3. Server Load Chart (Doughnut)
        const serverCtx = document.getElementById('serverLoadChart')?.getContext('2d');
        if (serverCtx) {
            new Chart(serverCtx, {
                type: 'doughnut',
                data: {
                    labels: {{ server_labels | tojson }},
                    datasets: [{
                        label: 'Requests',
                        data: {{ server_data | tojson }},
                        backgroundColor: [
                            'rgba(79, 70, 229, 0.8)',
                            'rgba(5, 150, 105, 0.8)',
                            'rgba(217, 70, 239, 0.8)',
                            'rgba(245, 158, 11, 0.8)',
                            'rgba(220, 38, 38, 0.8)',
                            'rgba(107, 114, 128, 0.8)'
                        ],
                    }]
                },
                options: {
                    responsive: true,
                }
            });
        }

        // 4. Model Usage Chart (Pie)
        const modelCtx = document.getElementById('modelUsageChart')?.getContext('2d');
        if (modelCtx) {
            new Chart(modelCtx, {
                type: 'pie',
                data: {
                    labels: {{ model_labels | tojson }},
                    datasets: [{
                        label: 'Requests',
                        data: {{ model_data | tojson }},
                        backgroundColor: [
                            'rgba(79, 70, 229, 0.8)',
                            'rgba(5, 150, 105, 0.8)',
                            'rgba(217, 70, 239, 0.8)',
                            'rgba(245, 158, 11, 0.8)',
                            'rgba(220, 38, 38, 0.8)',
                            'rgba(107, 114, 128, 0.8)',
                            'rgba(59, 130, 246, 0.8)',
                            'rgba(236, 72, 153, 0.8)',
                            'rgba(34, 197, 94, 0.8)',
                            'rgba(251, 146, 60, 0.8)'
                        ],
                    }]
                },
                options: {
                    responsive: true,
                }
            });
        }
    });
</script>
{% endblock %}